<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">物资维护</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width: 25px" />
      </div>
    </div>
    <div class="main">
      <el-input v-model="input" style="max-width: 400px" placeholder="请输入">
        <template #prepend>
          <el-select
            v-model="select"
            placeholder="搜索方式"
            style="width: 115px"
          >
            <el-option label="物资名" value="物资名" />
            <el-option label="物资位置" value="物资位置" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="Searchby" />
        </template>
      </el-input>
      <div class="row">
        <div>
          <el-icon @click="refresh">
            <Refresh />
          </el-icon>
          <el-text>刷新</el-text>
        </div>
        <el-button
          @click="dialogFormVisible = true"
          style="margin-right: 10px; margin-top: 2px"
          >添加物资</el-button
        >
      </div>

      <el-scrollbar height="450px" style="margin-top: 5px">
        <br />
        <div
          v-for="material in materialArr"
          :key="material.materialID"
          class="scrollbar-demo-item"
        >
          <div class="row">
            <el-text>物资ID:{{ material.materialID }}</el-text>
            <el-icon
              size="25px"
              @click="
                formRes = true;
                mater = material;
              "
            >
              <Edit />
            </el-icon>
          </div>
          <el-icon>
            <Link />
          </el-icon>
          物资名:{{ material.materialName }}
          <br />
          <el-icon>
            <Warning />
          </el-icon>
          物资位置:{{ material.locationName }}
          <br />
          <el-icon>
            <Fold />
          </el-icon>
          物资数量:{{ material.materialNum }}
          <br />
          <el-icon>
            <Bell />
          </el-icon>
          清点人:{{ material.checker }}
          <br />
          <el-icon>
            <Bell />
          </el-icon>
          清点人电话:{{ material.checkerPhone }}<br />
          <el-icon>
            <Bell />
          </el-icon>
          所属城市:{{ material.cityName }}

          <div class="del">
            <el-popconfirm
              title="你确认要删除吗?"
              @confirm="deleteEvent(event.eventID)"
            >
              <template #reference>
                <el-icon size="25px">
                  <DeleteFilled />
                </el-icon>
              </template>
            </el-popconfirm>
          </div>
        </div>
        <el-icon>
          <Service />
        </el-icon>
        <el-text>客服</el-text>
      </el-scrollbar>

      <el-dialog v-model="formRes" title="物资信息修改" width="300">
        <el-form v-model="mater">
          <el-form-item label="物资名">
            <el-input autocomplete="off" v-model="mater.materialName" />
          </el-form-item>
          <el-form-item label="物资数量">
            <el-input autocomplete="off" v-model="mater.materialNum" />
          </el-form-item>
          <el-form-item label="物资位置">
            <el-select
              v-model="mater.locationName"
              filterable
              allow-create
              placeholder="选择物资位置"
              style="width: 240px"
            >
              <el-option
                v-for="locationName in locationNames"
                :key="locationName"
                :label="locationName"
                :value="locationName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属城市">
            <el-select
              v-model="mater.cityName"
              filterable
              placeholder="选择所属城市"
              style="width: 240px"
            >
              <el-option
                v-for="city in cities"
                :key="city"
                :label="city"
                :value="city"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="清点人">
            <el-input autocomplete="off" v-model="mater.checker" />
          </el-form-item>
          <el-form-item label="清点人电话">
            <el-input
              autocomplete="off"
              v-model="mater.checkerPhone"
              disabled
            />
          </el-form-item>

          <el-form-item label="清点时间">
            <div>
              <el-date-picker
                v-model="mater.checkTime"
                type="datetime"
                placeholder="选择时间"
                style="width: 180px"
              />
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="formRes = false">取消</el-button>
            <el-button @click="update(mater)" type="primary">
              确认修改
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogFormVisible" title="添加物资" width="300">
        <el-form v-model="material">
          <el-form-item label="物资名">
            <el-input autocomplete="off" v-model="material.materialName" />
          </el-form-item>
          <el-form-item label="物资数量">
            <el-input autocomplete="off" v-model="material.materialNum" />
          </el-form-item>
          <el-form-item label="物资位置">
            <el-select
              v-model="material.locationName"
              filterable
              allow-create
              placeholder="选择物资位置"
              style="width: 240px"
            >
              <el-option
                v-for="locationName in locationNames"
                :key="locationName"
                :label="locationName"
                :value="locationName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属城市">
            <el-select
              v-model="material.cityName"
              filterable
              placeholder="选择所属城市"
              style="width: 240px"
            >
              <el-option
                v-for="city in cities"
                :key="city"
                :label="city"
                :value="city"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="清点人">
            <el-input autocomplete="off" v-model="material.checker" />
          </el-form-item>
          <el-form-item label="清点人电话">
            <el-input autocomplete="off" v-model="material.checkerPhone" />
          </el-form-item>

          <el-form-item label="清点时间">
            <div>
              <el-date-picker
                v-model="material.checkTime"
                type="datetime"
                placeholder="选择时间"
                style="width: 180px"
              />
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button @click="addMaterial" type="primary"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { ElMessage } from "element-plus";
import {
  ArrowLeft,
  Search,
  Refresh,
  Service,
  Edit,
  DeleteFilled,
} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");
let dialogFormVisible = ref(false);
let city = ref("");
let cities = ref([]);
let locationName = ref("");
let locationNames = ref([]);
let input = ref("");
let select = ref("");
let material = ref({
  materialID: "",
  checker: "",
  checkerPhone: "",
  checkTime: "",
  materialName: "",
  materialNum: "",
  locationName: "",
  materialNum: "",
  cityName: "",
  cityID: "",
});
const mater = ref({
  materialID: "",
  checker: "",
  checkerPhone: "",
  checkTime: "",
  materialName: "",
  materialNum: "",
  locationName: "",
  materialNum: "",
  cityName: "",
  cityID: "",
});
let formRes = ref(false);
const Searchby = () => {
  if (select.value == "物资名") {
    axios
      .post("/Worker/getMaterialInfoByName ", {
        materialName: input.value,
      })
      .then((response) => {
        materialArr.value = response.data;
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  } else if (select.value == "物资位置") {
    axios
      .post("/Worker/ListMaterialByLocation ", {
        locationName: input.value,
      })
      .then((response) => {
        materialArr.value = response.data;
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
};
const refresh = () => {
  init();
  input.value = "";
  select.value = "";
};
const back = () => {
  router.go(-1);
};
const self = () => {
  router.push("/workerMainPage/workerSelfPage");
};
const checkRes = ref(0);
const addMaterial = async () => {
  dialogFormVisible.value = false;
  console.log(material.value.checkerPhone);
  console.log(material.value.checkTime);
  console.log(material.value.checker);

 await axios
    .post("/Worker/getCheckerNum", {
      checkerPhone: material.value.checkerPhone,
    })
    .then((response) => {
      checkRes.value = response.data;
      console.log(checkRes.value);
    })
    .catch((error) => {
      console.log(error);
    });
  if (checkRes.value == 0) {
    await axios
      .post("/Worker/insertChecker", {
        checker: material.value.checker,
        checkerPhone: material.value.checkerPhone,
        checkTime: material.value.checkTime,
      })
      .then((response) => {
        checkRes.value = response.data;
        console.log(checkRes.value);

        if (checkRes.value == 1) {
          axios
            .post("/Worker/insertMaterial", {
              materialName: material.value.materialName,
              checkerPhone: material.value.checkerPhone,
              locationName: material.value.locationName,
              materialNum: material.value.materialNum,
            })
            .then((response) => {
              checkRes.value = response.data;
              console.log(checkRes.value);
            })
            .catch((error) => {
              console.log(error);
            });

          if (checkRes.value == 1) {
            ElMessage({
              message: "接报提交成功！",
              type: "success",
              plain: true,
              duration: 2000,
            });
            setTimeout(doSomethingAfterOneSecond, 2000);
          }
        }
      })
      .catch(() => {
        ElMessage({
          message: "接报提交失败！",
          type: "error",
          plain: true,
          duration: 2000,
        });
      });
  } else if (checkRes.value == 1) {
    await axios
      .post("/Worker/insertMaterial", {
        materialName: material.value.materialName,
        checkerPhone: material.value.checkerPhone,
        locationName: material.value.locationName,
        materialNum: material.value.materialNum,
      })
      .then((response) => {
        checkRes.value = response.data;
        console.log(checkRes.value);
      })
      .catch((error) => {
        console.log(error);
      });
    if (checkRes.value == 1) {
      ElMessage({
        message: "物资信息添加成功！",
        type: "success",
        plain: true,
        duration: 2000,
      });
      setTimeout(doSomethingAfterOneSecond, 2000);
    }
  }
};

const update = async () => {
  await axios
    .post("/Worker/renewChecker", {
      checker: mater.value.checker,
      checkerPhone: mater.value.checkerPhone,
      checkTime: mater.value.checkTime,
    })
    .then((response) => {
      checkRes.value = response.data;
      console.log(checkRes.value);
    })
    .catch((error) => {
      console.log(error);
    });
  if (checkRes.value == 1) {
    axios
      .post("/Worker/renewMaterial", {
        materialID: mater.value.materialID,
        materialName: mater.value.materialName,
        materialNum: mater.value.materialNum,
        locationName: mater.value.locationName,
      })
      .then((response) => {
        checkRes.value = response.data;
        console.log(checkRes.value);
      })
      .catch((error) => {
        console.log(error);
      });
    if (checkRes.value == 1) {
      formRes.value = false;
      ElMessage({
        message: "信息修改成功！",
        type: "success",
        plain: true,
        duration: 2000,
      });
    }
  }
};

const doSomethingAfterOneSecond = () => {
  location.reload();
};
const materialArr = ref([]);
const init = () => {
  axios
    .post("/Worker/ListAllMaterialInfo ", {})
    .then((response) => {
      materialArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("/Worker/listAllCityName ", {})
    .then((response) => {
      cities.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
  axios
    .post("/Worker/listAllLocationName ", {})
    .then((response) => {
      locationNames.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  justify-content: space-between;
}

.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}

.scrollbar-demo-item {
  height: 180px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.main {
  margin: 20px;
}

.del {
  margin-left: 340px;
  margin-top: -25px;
}
</style>